import { mount } from '@vue/test-utils'
import Login from '@/components/Login.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

// Mock `ElMessage` for testing
jest.mock('element-plus', () => ({
ElMessage: {
success: jest.fn(),
error: jest.fn(),
},
}));

// Mocking `useUserStore` login action
jest.mock('@/stores/user', () => ({
useUserStore: () => ({
login: jest.fn(),
}),
}));

describe('Login.vue', () => {
let wrapper;
let userStore;

beforeEach(() => {
userStore = useUserStore();
wrapper = mount(Login, {
global: {
plugins: [ElMessage], // Mock plugins for ElementPlus
},
});
});

it('should render the login form correctly', () => {
const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
const loginButton = wrapper.find('button.el-button');

expect(usernameInput.exists()).toBe(true);
expect(passwordInput.exists()).toBe(true);
expect(loginButton.exists()).toBe(true);
});

it('should show an error message when credentials are missing', async () => {
const loginButton = wrapper.find('button.el-button');
await loginButton.trigger('click'); // Simulate click

// Expect ElMessage.error to be called with the error message
expect(ElMessage.error).toHaveBeenCalledWith('用户名和密码不能为空');
});

it('should show an error message when invalid credentials are entered', async () => {
// Simulate entering invalid username and password
const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
await usernameInput.setValue('wronguser');
await passwordInput.setValue('wrongpass');

const loginButton = wrapper.find('button.el-button');
await loginButton.trigger('click');

// Expect login function to be called, but it will throw an error for invalid credentials
expect(userStore.login).toHaveBeenCalledWith({ username: 'wronguser', password: 'wrongpass' });
expect(ElMessage.error).toHaveBeenCalledWith('登录失败');
});

it('should successfully log in when valid credentials are entered', async () => {
// Simulate entering correct username and password
const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
await usernameInput.setValue('testuser');
await passwordInput.setValue('password123');

const loginButton = wrapper.find('button.el-button');
await loginButton.trigger('click');

// Mock login action success
userStore.login.mockResolvedValueOnce();

// Expect login to succeed and success message to be shown
expect(userStore.login).toHaveBeenCalledWith({ username: 'testuser', password: 'password123' });
expect(ElMessage.success).toHaveBeenCalledWith('登录成功');
});

it('should clear the password field on login failure', async () => {
// Simulate entering correct username and password
const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
await usernameInput.setValue('testuser');
await passwordInput.setValue('password123');

const loginButton = wrapper.find('button.el-button');
await loginButton.trigger('click');

// Mock login action failure
userStore.login.mockRejectedValueOnce(new Error('登录失败'));

// Expect login failure, error message and password clearing
expect(userStore.login).toHaveBeenCalledWith({ username: 'testuser', password: 'password123' });
expect(ElMessage.error).toHaveBeenCalledWith('登录失败');
expect(passwordInput.element.value).toBe(''); // Check if the password field is cleared
});
});
